<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>监听事件修饰符</title>
  <script src="../js/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <!-- 普通实现 -->
    <!-- 两个事件同时触发，事件冒泡 -->
    <div @click="divClick">
      aaaaa
      <button @click='btnClick'>按钮</button>
    </div>

    <!-- 1. .stop修饰符的使用，阻止冒泡，调用event.stopPropagation() -->
    <div @click="divClick">
      aaaaa
      <button @click.stop='btnClick'>按钮</button>
    </div>
    <br>
    <!-- 2. .prevent修饰符，阻止默认事件。调用event.preventDefault() -->
    <form action="baidu">
      <!-- 只打印不提交 -->
      <input type="submit" value="提交" @click.prevent="submitClick">
    </form>

    <!-- 3. 监听键盘输入事件:@keyUp键盘按键松开触发 -->
    <input type="text" @keyup="keyUp" />
    <!-- 监听特定按键：Enter -->
    <input type="text" @keyup.k="keyUp2" />

    <!-- 监听组件根元素的原生事件 -->
    <input type="text" @click.native="nativeClick" />

    <br>
    <!-- 4. .once修饰符的使用:第一次点击触发 -->
    <button @click.once="btn2Click">按钮2</button>

  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      },
      methods: {
        btnClick() {
          console.log('btnClick');
        },
        divClick() {
          console.log('divClick');
        },
        submitClick() {
          console.log("submitClick");
        },
        keyUp(){
          console.log("keyUp");
        },
        keyUp2(){
          console.log("输入了k");
        },
        nativeClick(){
          console.log("监听组件根元素,后面说");
        },
        btn2Click() {
          console.log("once修饰符触发函数");
        }
      }
    });
  </script>
</body>

</html>